<template>
  <div class="category-page">
    <van-nav-bar title="分类" />
    
    <!-- 搜索按钮 -->
    <div class="search-container">
      <van-button 
        block 
        icon="search" 
        class="search-btn"
        @click="onGotoSearch"
      >
        搜索商品
      </van-button>
    </div>
    
    <div class="main">
      <!-- 左侧分类列表 -->
      <div class="left-sidebar">
        <van-sidebar v-model="activeKey" @change="onSegChange">
          <van-sidebar-item 
            v-for="root in roots" 
            :key="root.id"
            :title="root.name"
          />
        </van-sidebar>
      </div>
      
      <!-- 右侧子分类 -->
      <div class="right-content">
        <sub-category 
          :categories="currentSubs" 
          :banner-img="currentBannerImg"
          @itemtap="onJumpToSpuList"
        />
      </div>
    </div>
    
    <!-- 底部导航 -->
    <tab-bar />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { Categories } from '@/models/categories'
import SubCategory from '@/components/sub-category/index.vue'
import TabBar from '@/components/tab-bar/index.vue'

const router = useRouter()

// 数据
const defaultRootId = 2 // 默认选择餐饮美食
const categories = ref(null)
const roots = ref([])
const currentSubs = ref([])
const currentBannerImg = ref('')
const activeKey = ref(0)

// 初始化分类数据
const initCategoryData = async () => {
  try {
    const categoriesInstance = new Categories()
    categories.value = categoriesInstance
    
    await categoriesInstance.getAll()
    const rootsData = categoriesInstance.getRoots()
    const defaultRoot = getDefaultRoot(rootsData)
    const currentSubsData = categoriesInstance.getSubs(defaultRoot.id)
    
    roots.value = rootsData
    currentSubs.value = currentSubsData
    currentBannerImg.value = defaultRoot.img
    
    // 设置默认选中的索引
    const defaultIndex = rootsData.findIndex(r => r.id === defaultRootId)
    activeKey.value = defaultIndex >= 0 ? defaultIndex : 0
    
  } catch (error) {
    console.error('获取分类失败:', error)
    showToast('获取分类失败')
  }
}

// 获取默认根分类
const getDefaultRoot = (roots) => {
  let defaultRoot = roots.find(r => r.id === defaultRootId)
  if (!defaultRoot) {
    defaultRoot = roots[0]
  }
  return defaultRoot
}

// 分类切换
const onSegChange = (index) => {
  const rootId = roots.value[index].id
  const currentSubsData = categories.value.getSubs(rootId)
  const currentRoot = categories.value.getRoot(rootId)
  
  currentSubs.value = currentSubsData
  currentBannerImg.value = currentRoot.img
}

// 跳转到商品列表
const onJumpToSpuList = (event) => {
  console.log('接收到子分类点击事件:', event)
  const cid = event.cid
  router.push({
    path: '/spu-list',
    query: { 
      cid: cid,
      type: 'sub_category'
    }
  })
}

// 跳转到搜索页
const onGotoSearch = () => {
  router.push('/search')
}

// 组件挂载时初始化数据
onMounted(() => {
  initCategoryData()
})
</script>

<style lang="scss" scoped>
.category-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 50px;
}

.search-container {
  padding: 10px 15px;
  background: #fff;
  
  .search-btn {
    height: 40px;
    background: #f5f5f5;
    border: none;
    color: #999;
    font-size: 14px;
  }
}

.main {
  display: flex;
  height: calc(100vh - 46px - 60px - 50px);
}

.left-sidebar {
  width: 80px;
  background: #fff;
  
  :deep(.van-sidebar-item) {
    padding: 15px 10px;
    font-size: 14px;
  }
  
  :deep(.van-sidebar-item--selected) {
    background-color: #f5f5f5;
    color: #157658;
  }
}

.right-content {
  flex: 1;
  background: #fff;
  margin-left: 1px;
  overflow-y: auto;
}
</style> 